<template>
<div  style="width: 1000px;margin: 0 auto">
  <div style="margin-top: 10px">图书>{{product.parentCategory}}>{{product.childrenCategory}}</div>
    <!--商品详情开始-->
    <el-row :gutter="2">
      <!--将一行划分为两等分 24/2=12-->
      <el-col :span="12">
        <el-card style="height: 500px">
          <img :src="product.url" width="100%" alt="">
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 500px;position: relative">
        <p style="font-size: 25px;margin: 8px 0">{{product.name}}</p>
          <p style="font-size: 15px;color: #999;margin: 0">{{product.author}}&nbsp著</p>
        <el-divider/>
        <p style="color: #999;font-size: 15px">
          <span style="width: 250px">发布时间:{{product.addTime}}</span>
          <span style="width: 150px">销量:{{product.saleCount}}</span>
        </p>
            <p style="color: #999;font-size: 15px">优惠券: 满200减20</p>
          <h4 style="margin: 0 ">图书简介</h4>
        <!-- overflow: hidden" 超出部分被隐藏 -->
        <p style="height: 93px;width: 430px;overflow: hidden;font-size: 14px;margin-bottom: 10px">
          &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{product.description}}</p>
          <p style="margin-top: 0">
            <span style="color: #df3033;font-size: 15px;">折扣价</span>
            <span style="font-size: 30px;font-weight: bold;color: #df3033;">
               ￥{{product.discountPrice}}
            </span>
            <span style="font-size: 15px;color: #cbcbcb">
                        <s>原价:￥{{product.fixedPrice}}</s>
            </span></p>
          <el-input-number v-model="num" style="position: absolute;bottom: 20px"
                           :min="1" :max="100" label="描述文字" ></el-input-number>
          <el-button style="background-color: #df3033;color: white;
          position: absolute;right: 30px;bottom: 20px" @click="addToCart(product.id)">
            <i class="el-icon-shopping-cart-2"></i>
            &nbsp&nbsp加入购物车
          </el-button>
        </el-card>
      </el-col>
    </el-row>
  <!--商品详情结束-->
  <el-row >
    <el-col>
      <el-card>
        <h4 style="margin-top: 0">商品详情</h4>
        <p style="font-size: 15px">
          <span>作者:{{product.author}}</span>
          <span>出版社:{{product.publishing}}</span>
          <span>出版时间:{{product.publishTime}}</span>
          <span>ISBN编号:{{product.isbn}}</span>
          <!----------------------------------------->
          <span>语种:{{product.language}}</span>
          <span>版次:{{product.edition}}</span>
          <span>装帧:{{product.bindLayout}}</span>
          <span>页数:{{product.totalPage}}</span>
          <!----------------------------------------->
          <span>开本:{{product.bookSize}}</span>
          <span>销量:{{product.saleCount}}</span>
          <span>分类:图书>{{product.parentCategory}}>{{product.childrenCategory}}</span>
        </p>
        <h4>商品简介</h4>
        <p style="font-size: 15px">
          &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
          {{product.description}}</p>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import axios from "axios";

export default {
  data: function() {
    return {
      num: 1,
      wd:"",
      product:{
        name: '万花筒·破茧（全2册）万花筒·破茧（全2册）万花筒·破茧（全2册）',
        url:'/imgs/atm.jpg',
        addTime: '2022-4-1',          // 上架时间
        fixedPrice:888,               // 定价
        discountPrice:666,            // 折扣价
        saleCount: 9999999,           // 销量
        description:                  // 商品描述
            ' 这是一套纪念奥特曼系列55周年的角色综合性写真集，收录42名奥特英雄和贝利亚的图片、档案以及' +
            '人物关系图，读者对象覆盖5岁儿童至90后怀旧读者群。“每当危机向人类逼近，定会前来救援的光之英' +
            '雄，在过去的半个世纪，曾有多少怪兽与宇宙人现身，将人们平静的生活搅乱，然而，每当我们即将失去' +
            '希望时，“他们”都会给予我们勇气，光之巨人——奥特曼。”本书还给读者展现奥特英雄和贝利亚的全数据' +
            '以及“必杀光线”的图像资料。国内尚未出版过同类写真书，借55周年之际推出，可对此类图书国内市场进' +
            '行探索和尝试。内容翔实，图片精美，是一本真正的作品资料收藏册，为漫迷广为追捧。上海新创华文化发' +
            '展有限公司是中国动漫品牌授权服务行业的领跑者。多年来凭借丰富的国内外品牌运作经验，以及专业的产' +
            '品研发指导、商品企划支持等完善的授权服务体系，成功推动了国内各大、中型企业产品迅速占领市场先机，' +
            '实现品牌价值化，已经完成了品牌授权行业和动漫衍生产品的整体产业链建设，成长为中国专业的品牌授权服' +
            '务提供商之一。',
        author:'凹凸凸',               // 作者
        publishing:'银河出版',         // 出版社
        publishTime:'1999-1-1',       // 出版时间
        isbn:888888888,               // ISBN编号
        language:'中文',               // 语种
        edition:'第一版',              // 版次
        totalPage:'500页',            // 页数
        bindLayout:'套装',            // 装帧
        bookSize:'100开',              // 开本
        parentCategory:'12',
        childrenCategory:'12'
      }
    }
  },
  created:function (){
    let id = location.search.split("=")[1]
    let url = 'http://localhost:8080/products/get/'+id
    axios.get(url).then((response) => {
      let json = response.data
      this.product = json.data
      console.log(json.data)
    })
  },
  methods:{
    addToCart(id){
      let cartAddNewDTO = {}
      cartAddNewDTO.productId=id
      cartAddNewDTO.count = this.num
      let url = 'http://localhost:8080/carts/addNew'
      axios.post(url,cartAddNewDTO).then((response) => {
        if (response.data.state) {
          this.$message.success("加入购物车成功")
        }
      })
    }
  }
}
</script>

<style scoped>
.el-card{
  margin-top:8px ; /*卡片下边距*/
}
.el-divider--horizontal{
  margin-top:2px;
}
span{
  display:inline-block;   /*让span定宽且并列*/
  width: 234px;
}
</style>